@import "../../variables.scss";

#sidebar {
  position: absolute;
  right: 0;
  width: $sidebar-collapsed-width;
  height: calc(100% - #{$header-height});
  top: $header-height;
  //+ $options-height;
  background-color: white;
  box-shadow: 0 0 16px rgba(153, 153, 153, 0.4);
  z-index: 1;
  transition: 0.3s All;
  font-size: 13px;
  overflow: auto;

  .toggleSidebar {
    position: absolute;
    right: 3px;
    top: 3px;
    width: 18px;
    height: 18px;
    cursor: pointer;
    background: url("./collapse.svg") no-repeat center;
    background-size: cover;
    z-index: 1;
  }

  &.active {
    width: $sidebar-width;

    .toggleSidebar {
      background: url("./expand.svg") no-repeat center;
      background-size: cover;
    }
  }

  //https://codepen.io/anon/pen/NAwqom

  .panel {
    position: relative;
    margin: 0;
    border: none;
    //max-height: 33%;
    //overflow: hidden;

    &:last-child .tabs{
      border: none;
    }

    .tabs {
      list-style: none;
      margin: 0;
      background-color: #ebeff2;
      height: $sidebar-header-size;
      line-height: $sidebar-header-size;
      padding: 0 0 0 10px;
      border-bottom: 1px solid rgba(0,0,0,0.03);

      li {
        display: inline-block;
        color: rgba(156,162,178,.5);
        cursor: pointer;
        transition: All .3s;

        &.active {
          color: #9ca2b2;
        }

        &:after {
          content: "|";
          color: rgba(156,162,178,.5);
          padding: 0 7px;
        }

        &:last-child:after {
          content: "";
        }
      }
    }

    .panel-content {
      max-height: calc((100vh - #{$header-height}) / 3 - #{$sidebar-header-size});
      height: calc((100vh - #{$header-height}) / 3 - #{$sidebar-header-size});
      overflow: auto;
    }
  }

  .tabs-rotated {
    transform: rotate(90deg);
    transform-origin: bottom left;

    width: calc(100vh - #{$header-height});
    padding: 0 0 0 20px;
    margin: 0;
    position: absolute;
    top: -$sidebar-collapsed-width;
    left: 0;
    height: $sidebar-collapsed-width;
    line-height: $sidebar-collapsed-width;

    li {
      display: inline-block;
      margin: 0 10px;
      padding: 0;
      cursor: pointer;
    }
  }
}
